<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="__IMG__/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__IMG__/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="{$Think.const.COMMON_URL}/Css/amazeui.min.css"/>
    <link rel="stylesheet" href="__CSS__/admin.css">
</head>
<body>
<!-- content start -->
<div class="admin-content">
    <form action="{:U('CarManage/add')}" method="post" enctype="multipart/form-data">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">增添车辆</strong>
                </div>
            </div>

            <hr>

            <div class="am-tabs am-margin" data-am-tabs>
                <ul class="am-tabs-nav am-nav am-nav-tabs">
                    <li class="am-active"><a href="#tab1">基本信息</a></li>
                </ul>

                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                名称
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <input type="text" name="name" class="am-form-field am-input-sm am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                车牌号
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <input type="text" name="plate_number" class="am-form-field am-input-sm am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                编号
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <input type="text" name="serial_number" class="am-form-field am-input-sm am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                颜色
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <input type="text" name="color" class="am-form-field am-input-sm am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <center>
                                <div class="am-form-group am-form-file ">
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i>上传车辆图片</button>
                                    <input id="doc-form-file" type="file" name="imgs[]" multiple>
                                </div>
                                <div id="file-list"></div>
                            </center>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                购买价格
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <input type="text" name="purchase_price" class="am-form-field am-input-sm am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                出租价格
                            </div>


                            <div class="am-u-sm-8 am-u-md-4 am-avg-sm-4">
                                <input type="text"  name="price1" class="am-form-field am-radius">
                                <input type="text" name="price2" class="am-form-field am-radius">
                                <input type="text" name="price3" class="am-form-field am-radius">
                                <input type="text" name="price4" class="am-form-field am-radius">
                                <input type="text" name="price5" class="am-form-field am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                介绍
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <input type="text" name="introduce" class="am-form-field am-input-sm am-radius">
                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                车况
                            </div>
                            <div class="am-u-sm-8 am-u-md-4">
                                <textarea class="" rows="5" name="car_case"></textarea>                            </div>
                            <div class="am-hide-sm-only am-u-md-6">*必填</div>
                        </div>
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                购买日期
                            </div>
                            <div class="am-u-sm-8 am-u-md-10">
                                <form action="" class="am-form am-form-inline">
                                    <div class="am-form-group am-form-icon">
                                        <i class="am-icon-calendar"></i>
                                        <input type="date" name="buy_time" class="am-form-field am-input-sm" placeholder="日期">
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">所属类别</div>
                            <div class="am-u-sm-8 am-u-md-10">
                                <select data-am-selected="{btnSize: 'sm'}" class="am-form-field am-input-sm am-radius">
                                    <option value="option1">选项一...</option>
                                    <option value="option2">选项二.....</option>
                                    <option value="option3">选项三........</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="am-margin">
                <center>
                    <input type="submit" class="am-btn am-btn-primary am-btn-xs" value="提交保存">
                    <a href="{:U('CarTerm/car_term_list')}" class="am-btn am-btn-primary am-btn-xs">放弃保存</a>
                </center>
            </div>
        </div>
    </form>

    <footer class="admin-content-footer">
        <hr>
        <center><p class="am-padding-left">© 2016.版权归属跌倒的小孩</p></center>
    </footer>
</div>
<!-- content end -->
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__COMMON__/Js/jquery.min.js"></script>
<!--<![endif]-->
<script src="__COMMON__/Js/amazeui.min.js"></script>
<script src="__COMMON__/Js/app.js"></script>
<script>
    $(function() {
        $('#doc-form-file').on('change', function() {
            var fileNames = '';
            $.each(this.files, function() {

                var reader = new FileReader();
                reader.readAsDataURL(this);
                reader.onload = function(e){
                    var htmlstr = '<img src="'+this.result+'" width="100px" height="100px">';
                    $('#file-list').append(htmlstr);
                }

            });

        });
    });
</script>
</body>
</html>